<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('应用人员列表')" />

	<style>
		#bootstrap-table tr{
			border: 1px solid #ddd;
		}
		#bootstrap-table th{
			border: 1px solid #ddd;
		}
		.counter{
			color: #ffffff;
			display: block;
			font-size: 24px;
			font-weight: 600;
		}
		.text-right-btn{
			height: 96px;
			text-align: right;
		}
	</style>
</head>
<body class="gray-bg">
     <div class="container-div">
		<div class="row">

			<div class="btn-group-sm">
				<div class="btn btn-success col-md-2 col-sm-2 col-lg-4 text-right-btn" >
			<span class="counter">GeoEast处理应用人员熟练比</span>
			100%
			</div>
			 <div class="btn btn-primary  col-md-2 col-sm-2 col-lg-4 text-right-btn">
				 <span class="counter"> GeoEast解释应用人员熟练比</span>
				 100%
			 </div>
			 <div class="btn btn-danger  col-md-2 col-sm-2 col-lg-4 text-right-btn">
				 <span class="counter"> GeoEast软件培训覆盖率</span>
				 84%
			 </div>
		 </div>

	        <!--<div class="btn-group-sm" id="toolbar" role="group">-->
				<!--<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="statistics:statisticsPeople:add">-->
					<!--<i class="fa fa-plus"></i> 添加-->
				<!--</a>-->
				<!--<a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()" shiro:hasPermission="statistics:statisticsPeople:edit">-->
					<!--<i class="fa fa-edit"></i> 修改-->
				<!--</a>-->
				<!--<a class="btn btn-danger btn-del btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="statistics:statisticsPeople:remove">-->
					<!--<i class="fa fa-remove"></i> 删除-->
				<!--</a>-->
				<!--<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="statistics:statisticsPeople:export">-->
						<!--<i class="fa fa-download"></i> 导出-->
				 <!--</a>-->
			<!--</div>-->
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" data-mobile-responsive="true"></table>
			</div>

			<div class="col-lg-12">
				<div class="panel panel-border panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title">处理统计柱状图
						</h3>

					</div>
					<div class="panel-body" style="overflow:auto">
						<div id="echarts-bar" style="height: 300px;width:1000px;" ></div>
					</div>

				</div>
				<div class="panel panel-border panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title">解释统计柱状图
						</h3>

					</div>
					<div class="panel-body" style="overflow:auto">
						<div id="echarts-bar1" style="height: 300px;width:1000px;" ></div>
					</div>


				</div>
				<div class="panel panel-border panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title">熟练人员饼图
						</h3>
					</div>
					<div class="panel-body" style="overflow:auto">
						<div id="echartsPie" style="width: 500px;height:400px;float:left"></div>
						<div id="echartsPie1" style="width: 500px;height:400px; float:right"></div>
					</div>
				</div>
			</div>

		</div>
	</div>
    <div th:include="include :: footer"></div>
	 <script th:src="@{/js/echarts.common.min.js}"></script>
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('statistics:statisticsPeople:edit')}]];
        var removeFlag = [[${@permission.hasPermi('statistics:statisticsPeople:remove')}]];
        var prefix = ctx + "statistics/statisticsPeople";

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
				exportUrl: prefix + "/export",
                modalName: "应用人员",
		        showExport: true,
                columns: [
                    [
                        {field: 'unit',title: "用户单位",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,sortable: true},
                        {title: "处理",valign:"middle", align:"center",colspan: 4, rowspan: 1 },
                        {title: "解释",valign:"middle", align:"center",colspan: 4, rowspan: 1 },
                        {field: 'trainperiod',title: "培训期次",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,sortable: true},
                        {field: 'traintime',title: "培训人次",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,sortable: true},
                        {field: 'trainpeople',title: "培训人数",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,sortable: true},
                        {field: 'trainrate',title: "培训覆盖率",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,sortable: true},
                        {field: 'unit',title: "操作",valign:"middle", align:"center",colspan: 1, rowspan: 2,
                            formatter: function(value, row, index) {
                                var actions = [];
                                actions.push('<a class="btn btn-warning btn-xs " href="javascript:void(0)" onclick="$.operate.edit('+row.id+')">修改</a> ');
                                return actions.join('');
                            }
                        },
                    ],
                    [
                        {field: "operatetotal", title: "人员总数",valign:"middle", align:"center",sortable: true},
                        {field: "operateapply", title: "GeoEast应用人员",valign:"middle", align:"center",sortable: true},
                        {field: "operateskill", title: "熟练人数",valign:"middle", align:"center",sortable: true},
                        {field: "operaterate", title: "熟练人员占比",valign:"middle", align:"center",sortable: true},
                        {field: "explaintotal", title: "人员总数",valign:"middle", align:"center",sortable: true},
                        {field: "explainapply", title: "GeoEast应用人员",valign:"middle", align:"center",sortable: true},
                        {field: "explainskill", title: "熟练人数",valign:"middle", align:"center",sortable: true},
                        {field: "explainrate", title: "熟练人员占比",valign:"middle", align:"center",sortable: true},
                        {field: 'unitid',title: "单位标示",visible:false},

                    ]
                ]
            };
            $.table.init(options);

            var tempArray=[[${operatetotals}]];
            var teampArray2=[[${operateskills}]];
            var teampArray3=[[${explaintotals}]];
            var teampArray4=[[${explainskills}]];
            var dataArray=tempArray.split(',');
            var dataArray2=teampArray2.split(',');
            var dataArray3=teampArray3.split(',');
            var dataArray4=teampArray4.split(',');

            var myChart = echarts.init(document.getElementById('echarts-bar'));
            var myChart1 = echarts.init(document.getElementById('echarts-bar1'));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: ''
                },
                grid : {
                    left : 60,
                    right: 30,
                    bottom:65
                },
                tooltip: {},
                legend: {
                    data:['GeoEast应用人员总数','熟练人员数']
                },
                xAxis: {
                    data: ["大庆","辽河","长庆","塔里木","新疆","西南","吉林","大港","青海","华北","吐哈","冀东","玉门","浙江","煤层气","南方公司","勘探开发院","勘探院西北分院","杭州地质研究院"],
                    axisLabel: {
                        interval:0,
                        rotate:40
                    } ,
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{formatter:'{value} (人)'}
                },
                series: [{
                    name: 'GeoEast应用人员总数',
                    type: 'bar',
                    data: dataArray,
                    itemStyle:{
                        normal:{
                            color:'#3c78b0'
                        }
                    },
                },
                    {
                        name: '熟练人员数',
                        type: 'bar',
                        data: dataArray2,
                        itemStyle:{
                            normal:{
                                color:'#e04c4c'
                            }
                        },
                    }],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'black'
                        }
                    }
                }
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


            var option1 = {
                title: {
                    text: ''
                },
                grid : {
                    left : 60,
                    right: 30,
                    bottom:65
                },
                tooltip: {},
                legend: {
                    data:['GeoEast应用人员总数','熟练人员数']
                },
                xAxis: {
                    data: ["大庆","辽河","长庆","塔里木","新疆","西南","吉林","大港","青海","华北","吐哈","冀东","玉门","浙江","煤层气","南方公司","勘探开发院","勘探院西北分院","杭州地质研究院"],
                    axisLabel: {
                        interval:0,
                        rotate:40
                    } ,
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{formatter:'{value} (人)'}
                },
                series: [{
                    name: 'GeoEast应用人员总数',
                    type: 'bar',
                    data: dataArray3,
                    itemStyle:{
                        normal:{
                            color:'#3c78b0'
                        }
                    },
                },
                    {
                        name: '熟练人员数',
                        type: 'bar',
                        data: dataArray4,
                        itemStyle:{
                            normal:{
                                color:'#e04c4c'
                            }
                        },
                    }],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'black'
                        }
                    }
                }
            };
            myChart1.setOption(option1);


            var echartsPie = echarts.init(document.getElementById('echartsPie'));


            var json = [
                {value:"[[${operateskill}]]",name:'熟练人员'},
                {value:"39",name:'非熟练人员'},
            ];
            var option4 = {
                title : {
                    text: 'GeoEast处理人员总数[[${operateapply}]]人',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} 人"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:['熟练人员','非熟练人员']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        }
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'处理',
                        type:'pie',
                        radius : '55%',//饼图的半径大小
                        center: ['50%', '60%'],//饼图的位置
                        label: {
                            normal: {
                                show: true,
                                position:'inner', //标签的位置
                                formatter: "{b}: {c}人"
                            }
                        },
                        data:json,
                        color:["#3c78b0","#e04c4c"]
                    }
                ]
            };
            echartsPie.setOption(option4);

            var echartsPie1 = echarts.init(document.getElementById('echartsPie1'));

            var json = [
                {value:"[[${explainskill}]]",name:'熟练人员'},
                {value:"121",name:'非熟练人员'},
            ];
            var option5 = {
                title : {
                    text: 'GeoEast解释人员总数[[${explainapply}]]人',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} 人"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:['熟练人员','非熟练人员']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        }
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'解释',
                        type:'pie',
                        radius : '55%',//饼图的半径大小
                        center: ['50%', '60%'],//饼图的位置
                        label: {
                            normal: {
                                show: true,
                                position:'inner', //标签的位置
                                formatter: "{b}: {c}人"
                            }
                        },
                        data:json  ,
                        color:["#3c78b0","#e04c4c"]
                    }
                ]
            };
            echartsPie1.setOption(option5);
        });

    </script>
</body>
</html>